<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>搜索</title>
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/page.css">
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/media.js"></script>
    <script src="../js/common.js"></script>
    <style>

    </style>
</head>

<body>
    <div class="search">
        <div class="title flex">
            <input type="text" placeholder="请输入要查找信息" id="search_info">
            <span onclick='window.location.href="../index.html"'>取消</span>
        </div>


        <div class="hot-search">
            <p class="p1">
                热门搜索
            </p>
            <ul class="clearfix">
                <li>
                    自由自在
                </li>
            </ul>
        </div>

        <div class="history-search">
            <p class="p1 flex">
                <span>历史搜索</span>
                <em></em>
            </p>
            <ul class="clearfix">
                <li>
                    自由自在
                </li>
                <li>
                    自由自在
                </li>
                <li>
                    自由自在
                </li>
                <li>
                    自由自在
                </li>
                <li>
                    自由自在
                </li>
                <li>
                    自由自在
                </li>
            </ul>
        </div>

        <div class="search_result">
            <p class="p1">
                搜索结果
            </p>
            <ul class="clearfix">

            </ul>
        </div>
    </div>

    <script>
        $(function () {
            var info;
            $('.search_result').hide();
            $('#search_info').keyup(function (e) {
                info = $(this).val();
                console.log(info)
                if (e.keyCode === 13) {
                    $.ajax({
                        url: base_url + 'ZITAOHUI/search',
                        data: {
                            name: info
                        },
                        success: function (data) {
                            // 重置所有搜索结果
                            $('.search_result ul').empty();
                            $('.search_result').show();
                            console.log(data)
                            let all_data = data.extend.data;
                            for (let i = 0; i < all_data.length; i++) {
                                let li = $('<li></li>');
                                li.append(all_data[i].produceTitle);
                                li.attr('data-id', all_data[i].produceId)
                                li.attr('data-whitchType', all_data[i].whitchType)
                                li.css({
                                    "width": '50%',
                                    'margin-right': '0'
                                })
                                $('.search_result ul').append(li)
                            }
                            $('.search_result ul li').click(function (e) {
                                if ($(this).data('whitchType') == 0) {
                                    window.location.href =
                                        '../page/buy-info-page.4.html?p_id=' + $(
                                            this).data(
                                            'id')
                                } else {
                                    window.location.href =
                                        '../page/buy-info-page.3.html?p_id=' + $(
                                            this).data(
                                            'id')
                                }
                            })
                        },
                        error: function () {
                            console.error('接口错误')
                        }
                    })
                }
            })


        })
    </script>




</body>

</html>